<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>TypeScript |   👉Aresnine 👈</title>
    <meta name="description" content="Aresnine的个人博客,web,vue,组件库,js">
    <link rel="preload stylesheet" href="/assets/style.427ea497.css" as="style">
    <link rel="modulepreload" href="/assets/app.db42a1fc.js">
    <link rel="modulepreload" href="/assets/technology_typescript_index.md.b32f8f74.lean.js">
    
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-236bb526><!--[--><!--]--><!--[--><span tabindex="-1" data-v-14c16caa></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-14c16caa> Skip to content </a><!--]--><!----><header class="VPNav" data-v-236bb526 data-v-de4e1621><div class="VPNavBar" data-v-de4e1621 data-v-52cf45e4><div class="container" data-v-52cf45e4><div class="title" data-v-52cf45e4><div class="VPNavBarTitle" data-v-52cf45e4 data-v-a8248850><a class="title" href="/" data-v-a8248850><!--[--><!--]--><!----><!--[-->  👉Aresnine 👈<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-52cf45e4><div class="curtain" data-v-52cf45e4></div><div class="content-body" data-v-52cf45e4><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-52cf45e4 data-v-97cd7ece><span id="main-nav-aria-label" class="visually-hidden" data-v-97cd7ece>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/面试题/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->面试题<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vitepress/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->vitePress<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/www/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->网站搭建<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue3/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->vue🐴<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/每日任务/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->每日任务<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/技术总结/" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->技术总结<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-97cd7ece data-v-6d0cfa0d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6d0cfa0d><span class="text" data-v-6d0cfa0d><!----> technology <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6d0cfa0d><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-6d0cfa0d><div class="VPMenu" data-v-6d0cfa0d data-v-24d333ba><div class="items" data-v-24d333ba><!--[--><!--[--><div class="VPMenuLink" data-v-24d333ba data-v-78f06588><a class="VPLink link" href="/technology/待整理/" data-v-78f06588 data-v-a6710068><!--[-->待整理<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-24d333ba data-v-78f06588><a class="VPLink link active" href="/technology/typescript/" data-v-78f06588 data-v-a6710068><!--[-->typescript<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-24d333ba data-v-78f06588><a class="VPLink link" href="/technology/blog/" data-v-78f06588 data-v-a6710068><!--[-->博客搭建<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-24d333ba data-v-78f06588><a class="VPLink link" href="/technology/vantcli/" data-v-78f06588 data-v-a6710068><!--[-->vantcli文档<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/components/index.html" data-v-97cd7ece data-v-502d9526 data-v-a6710068><!--[-->组件库<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-52cf45e4 data-v-3c0f7ebf><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-3c0f7ebf data-v-1811cbb7 data-v-51cfdd54><span class="check" data-v-51cfdd54><span class="icon" data-v-51cfdd54><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1811cbb7><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-1811cbb7><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-52cf45e4 data-v-eaa5cb3f data-v-6d0cfa0d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6d0cfa0d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6d0cfa0d><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6d0cfa0d><div class="VPMenu" data-v-6d0cfa0d data-v-24d333ba><!----><!--[--><!--[--><!----><div class="group" data-v-eaa5cb3f><div class="item appearance" data-v-eaa5cb3f><p class="label" data-v-eaa5cb3f>Appearance</p><div class="appearance-action" data-v-eaa5cb3f><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-eaa5cb3f data-v-1811cbb7 data-v-51cfdd54><span class="check" data-v-51cfdd54><span class="icon" data-v-51cfdd54><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1811cbb7><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-1811cbb7><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-52cf45e4 data-v-f4211e0b><span class="container" data-v-f4211e0b><span class="top" data-v-f4211e0b></span><span class="middle" data-v-f4211e0b></span><span class="bottom" data-v-f4211e0b></span></span></button></div></div></div></div><!----></header><!----><!----><div class="VPContent" id="VPContent" data-v-236bb526 data-v-bb109c21><div class="VPDoc has-aside" data-v-bb109c21 data-v-9710e0b3><div class="container" data-v-9710e0b3><div class="aside" data-v-9710e0b3><div class="aside-curtain" data-v-9710e0b3></div><div class="aside-container" data-v-9710e0b3><div class="aside-content" data-v-9710e0b3><div class="VPDocAside" data-v-9710e0b3 data-v-b312be0a><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-b312be0a data-v-69920f5a><div class="content" data-v-69920f5a><div class="outline-marker" data-v-69920f5a></div><div class="outline-title" data-v-69920f5a>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-69920f5a><span class="visually-hidden" id="doc-outline-aria-label" data-v-69920f5a> Table of Contents for current page </span><ul class="root" data-v-69920f5a data-v-5343b0c6><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-b312be0a></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-9710e0b3><div class="content-container" data-v-9710e0b3><!--[--><!--]--><main class="main" data-v-9710e0b3><div style="position:relative;" class="vp-doc _technology_typescript_index" data-v-9710e0b3><div><h1 id="typescript" tabindex="-1">TypeScript <a class="header-anchor" href="#typescript" aria-hidden="true">#</a></h1><h2 id="关于typescript的一些讨论" tabindex="-1">关于TypeScript的一些讨论 <a class="header-anchor" href="#关于typescript的一些讨论" aria-hidden="true">#</a></h2><ol><li><p>TypeScript的本质</p><p>类型约束</p></li><li><p>基于现状TypeScript的使用场景</p><blockquote><p>使用</p></blockquote><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">中大型项目，需要长期维护的项目，底层库or框架</span></span>
<span class="line"><span style="color:#babed8;">好处：</span></span>
<span class="line"><span style="color:#babed8;">	1. 工程质量</span></span>
<span class="line"><span style="color:#babed8;">	2. 工作效率</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><blockquote><p>不使用</p></blockquote><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">小千行的代码项目，不需要长期维护的项目</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div></li><li><p>使用TypeScript的感受</p><ol><li>功能维度</li><li>类型维度</li></ol></li></ol><h2 id="vscode配置与插件" tabindex="-1">vscode配置与插件 <a class="header-anchor" href="#vscode配置与插件" aria-hidden="true">#</a></h2><h3 id="插件" tabindex="-1">插件 <a class="header-anchor" href="#插件" aria-hidden="true">#</a></h3><ol><li><a href="https://link.juejin.cn/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dpmneo.tsimporter" target="_blank" rel="noreferrer">TypeScript Importer</a></li><li><a href="https://link.juejin.cn/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dstringham.move-ts" target="_blank" rel="noreferrer">Move TS</a></li><li><a href="https://link.juejin.cn/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DPhilHindle.errorlens" target="_blank" rel="noreferrer">ErrorLens</a></li></ol><h3 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-hidden="true">#</a></h3><p>TypeScript的扩展设置</p><ol><li>Function Like Return Types，显示推导得到的函数返回值类型；</li><li>Parameter Names，显示函数入参的名称；</li><li>Parameter Types，显示函数入参的类型；</li><li>Variable Types，显示变量的类型。</li></ol><h2 id="typescript的使用" tabindex="-1">TypeScript的使用 <a class="header-anchor" href="#typescript的使用" aria-hidden="true">#</a></h2><h3 id="_1、类型是什么" tabindex="-1">1、类型是什么？ <a class="header-anchor" href="#_1、类型是什么" aria-hidden="true">#</a></h3><ol><li>不同的类型占据的内存大小不同</li><li>不同的类型变量可做的操作不同</li></ol><p><strong>如果能保证对某种类型只做该类型允许的操作，这就叫做<code>类型安全</code></strong></p><p><strong>类型检查是为了保证类型安全</strong></p><h3 id="_2、类型检查" tabindex="-1">2、类型检查 <a class="header-anchor" href="#_2、类型检查" aria-hidden="true">#</a></h3><ul><li>动态类型检查（js）:运行时做类型检查</li><li>静态类型检查（ts）:编译时做类型检查</li></ul><h3 id="_3、类型系统" tabindex="-1">3、类型系统 <a class="header-anchor" href="#_3、类型系统" aria-hidden="true">#</a></h3><ol><li>简单类型系统</li><li>支持泛型的类型系统（类型参数）</li><li>支持类型编程的类型系统（<strong>对传入的类型参数（泛型）做各种逻辑运算，产生新的类型，这就是类型编程。</strong>）</li></ol><blockquote><p>类型编程案例： 获取对象中的属性</p></blockquote><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">function getPropValue&lt;T extends object,Key extends keyof T&gt;(obj: T, key: Key): T[Key] {</span></span>
<span class="line"><span style="color:#babed8;">    return obj[key];</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h3 id="_4、类型" tabindex="-1">4、类型 <a class="header-anchor" href="#_4、类型" aria-hidden="true">#</a></h3><p>JS类型：</p><ul><li><p>基础类型：number、boolean、string、object、bigint、symbol、undefined、null</p></li><li><p>包装类型：Number、Boolean、String、Object、Symbol</p></li><li><p>复合类型：class、Array</p></li></ul><p>TS类型：</p><ul><li><p>**元组（Tuple）**就是元素个数和类型固定的数组类型</p></li><li><p>**接口（Interface）**接口可以用来描述函数、构造器、索引类型（对象、class、数组）等复合类型</p></li><li><p>**枚举（Enum）**是一系列值的复合</p></li><li><p><strong>never</strong> 代表不可达，比如函数抛异常的时候，返回值就是 never。</p></li><li><p><strong>void</strong> 代表空，可以是 undefined 或 never。</p></li><li><p><strong>any</strong> 是任意类型，任何类型都可以赋值给它，它也可以赋值给任何类型（除了 never）。</p></li><li><p><strong>unknown</strong> 是未知类型，任何类型都 可以赋值给它，但是它不可以赋值给别的类型。</p></li></ul><p>此外，typescript还支持字面量类型，类似数字可以使用<code>11</code>，字符串可以使用<code>&#39;aa&#39;</code>,对象可以使用<code>{}</code></p><blockquote><p>字符串字面量</p></blockquote><ul><li>普通的字符串字面量： <code>&#39;aa&#39;</code></li><li>模板字面量：<code>&#39;aa${string}&#39;</code> 表示以aa开头的字符串</li></ul><h4 id="_4-1-元组" tabindex="-1">4.1 元组 <a class="header-anchor" href="#_4-1-元组" aria-hidden="true">#</a></h4><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">type</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Tuple</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> [</span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><h4 id="_4-2-枚举" tabindex="-1">4.2 枚举 <a class="header-anchor" href="#_4-2-枚举" aria-hidden="true">#</a></h4><blockquote><p>普通枚举</p></blockquote><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">enum color {</span></span>
<span class="line"><span style="color:#babed8;">  red, // 0</span></span>
<span class="line"><span style="color:#babed8;">  green, // 1</span></span>
<span class="line"><span style="color:#babed8;">  blue, // 2</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><blockquote><p>设置初始值得枚举</p></blockquote><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">// 设置初始值的枚举</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">enum Week {</span></span>
<span class="line"><span style="color:#babed8;">  d1 = &quot;星期一&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  d2 = &quot;星期二&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  d3 = &quot;星期三&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  d4,</span></span>
<span class="line"><span style="color:#babed8;">  d5,</span></span>
<span class="line"><span style="color:#babed8;">  d6,</span></span>
<span class="line"><span style="color:#babed8;">  d7,</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p><b style="color:red;">Enum member must have initializer</b></p><blockquote><p>正确的方式：</p></blockquote><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">// 设置初始值的枚举</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">enum Week {</span></span>
<span class="line"><span style="color:#babed8;">  d1 = &quot;星期一&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  d2 = &quot;星期二&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  d3 = &quot;星期三&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  d4 = 2,</span></span>
<span class="line"><span style="color:#babed8;">  d5, // 3</span></span>
<span class="line"><span style="color:#babed8;">  d6, // 4</span></span>
<span class="line"><span style="color:#babed8;">  d7, // 5</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>注意点：对于枚举，当使用普通定义方式，没有给任何一个成员赋值的时候，此时默认值从0开始依次递增，当使用全部字符串可以，当使用部分字符串的时候，必须确保最后一个值为数字，方便后面的依次递增</p><h4 id="_4-3-接口" tabindex="-1">4.3 接口 <a class="header-anchor" href="#_4-3-接口" aria-hidden="true">#</a></h4><blockquote><p>对象</p></blockquote><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">IPerson</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">class</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">implements</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">IPerson</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> obj</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">IPerson</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">guang</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">18</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><blockquote><p>函数</p></blockquote><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">SayHello</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">):</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> func</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">SayHello</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hello,</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">name</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><blockquote><p>构造器</p></blockquote><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">PersonConstructor</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">new</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">age</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">):</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">IPerson</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">createPerson</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">ctor</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">PersonConstructor</span><span style="color:#89DDFF;">):</span><span style="color:#FFCB6B;">IPerson</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">ctor</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">guang</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">18</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><h3 id="_7、number和number的区别" tabindex="-1">7、number和Number的区别 <a class="header-anchor" href="#_7、number和number的区别" aria-hidden="true">#</a></h3><p>Number是number的包装类型，经验：建议使用number</p><ul><li><p>在 <code>ts</code> 中，以 <code>number</code> 与 <code>Number</code> 举例，前者是 <code>ts</code> 中的类型，后者是 <code>js</code> 中的对象，其他类型也一个意思。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">let a:Number = new Number(1)</span></span>
<span class="line"><span style="color:#babed8;">let b = a + 1</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p><b style="color:red;">error TS2365: Operator &#39;+&#39; cannot be applied to types &#39;Number&#39; and &#39;number&#39;.</b></p></li></ul><h3 id="_8、关于enum枚举类型的定义" tabindex="-1">8、关于enum枚举类型的定义 <a class="header-anchor" href="#_8、关于enum枚举类型的定义" aria-hidden="true">#</a></h3><blockquote><p>普通枚举</p></blockquote><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">enum color {</span></span>
<span class="line"><span style="color:#babed8;">  red, // 0</span></span>
<span class="line"><span style="color:#babed8;">  green, // 1</span></span>
<span class="line"><span style="color:#babed8;">  blue, // 2</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><blockquote><p>设置初始值得枚举</p></blockquote><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">// 设置初始值的枚举</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">enum Week {</span></span>
<span class="line"><span style="color:#babed8;">  d1 = &quot;星期一&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  d2 = &quot;星期二&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  d3 = &quot;星期三&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  d4,</span></span>
<span class="line"><span style="color:#babed8;">  d5,</span></span>
<span class="line"><span style="color:#babed8;">  d6,</span></span>
<span class="line"><span style="color:#babed8;">  d7,</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p><strong>Enum member must have initializer</strong></p><blockquote><p>正确的方式：</p></blockquote><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">// 设置初始值的枚举</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">enum Week {</span></span>
<span class="line"><span style="color:#babed8;">  d1 = &quot;星期一&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  d2 = &quot;星期二&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  d3 = &quot;星期三&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  d4 = 2,</span></span>
<span class="line"><span style="color:#babed8;">  d5, // 3</span></span>
<span class="line"><span style="color:#babed8;">  d6, // 4</span></span>
<span class="line"><span style="color:#babed8;">  d7, // 5</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>注意点：对于枚举，当使用普通定义方式，没有给任何一个成员赋值的时候，此时默认值从0开始依次递增，当使用全部字符串可以，当使用部分字符串的时候，必须确保最后一个值为数字，方便后面的依次递增</p><h3 id="_9、数组" tabindex="-1">9、数组 <a class="header-anchor" href="#_9、数组" aria-hidden="true">#</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">// 数组的定义方式</span></span>
<span class="line"><span style="color:#babed8;">const arr: number[] = [1, 2, 3];</span></span>
<span class="line"><span style="color:#babed8;">const arr2: Array&lt;number&gt; = [2, 3, 4];</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h3 id="_10、元组" tabindex="-1">10、元组 <a class="header-anchor" href="#_10、元组" aria-hidden="true">#</a></h3><p>元素类型和个数确定的数组 tuple</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">// 元组</span></span>
<span class="line"><span style="color:#babed8;">const t1: [number, string, boolean] = [1, &quot;1&quot;, true];</span></span>
<span class="line"><span style="color:#babed8;">t1.push(2222);</span></span>
<span class="line"><span style="color:#babed8;">console.log(t1);</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>元组是可以调用push的方法的，因为TS是JS的超集，所以元组能够使用数组的方法，即我们可以通过数组的方法让该元组不再固定大小。(这里说实在有点迷，赋值的时候元组大小固定，调方法又能让元组大小不固定)</p><h3 id="_11、undefined-和-null" tabindex="-1">11、undefined 和 null <a class="header-anchor" href="#_11、undefined-和-null" aria-hidden="true">#</a></h3><p>默认情况下 null 和 undefined 是所有类型的子类型。 也就是说你可以把 null 和 undefined 赋值给其他类型。前提是strick为false即非严格模式</p><p><strong>但是 undefined 可以给 void 赋值</strong></p><h3 id="_12、void类型" tabindex="-1">12、void类型 <a class="header-anchor" href="#_12、void类型" aria-hidden="true">#</a></h3><p>无效的，用于函数的返回值，表示没有返回值</p><h3 id="_13、never" tabindex="-1">13、never <a class="header-anchor" href="#_13、never" aria-hidden="true">#</a></h3><p>永不存在的值</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">1、抛出异常的返回值</span></span>
<span class="line"><span style="color:#babed8;">2、死循环的返回值</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>与void应用种类类似，但是表示改程序不会有任何返回，其中报错中间抛出错误或者死循环</p><h3 id="_14、unknown" tabindex="-1">14、unknown <a class="header-anchor" href="#_14、unknown" aria-hidden="true">#</a></h3><p>any代表任意类型</p><p>unknown与any一样，所有类型都可以分配给unknown</p><blockquote><p>unknown和any的区别</p></blockquote><p>任何类型的值都可以赋值给any，同时any类型的值也可以赋值给任何类型。</p><p>unknown任何类型值都可以赋给它，但它只能赋值给unknown和any</p><blockquote><p>应用的不同点：</p></blockquote><p>unknown类型的数据在使用之前需要你对类型做一个检查或者缩小其范围，更推荐使用unknown而非any</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">// function decom(callback: any) {</span></span>
<span class="line"><span style="color:#babed8;">//   // 类型为any，可以对any进行任何操作</span></span>
<span class="line"><span style="color:#babed8;">//   callback();</span></span>
<span class="line"><span style="color:#babed8;">// }</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">// decom(1);</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">function decom(callback: unknown) {</span></span>
<span class="line"><span style="color:#babed8;">  // 类型为any，可以对any进行任何操作、</span></span>
<span class="line"><span style="color:#babed8;">  if (typeof callback == &quot;function&quot;) {</span></span>
<span class="line"><span style="color:#babed8;">    callback();</span></span>
<span class="line"><span style="color:#babed8;">  }</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;">function demo(): void {</span></span>
<span class="line"><span style="color:#babed8;">  console.log(2222);</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;">decom(demo);</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h3 id="_15、object、object和-类型" tabindex="-1">15、object、Object和 {}类型 <a class="header-anchor" href="#_15、object、object和-类型" aria-hidden="true">#</a></h3><ul><li>object代表所有非原始类型</li><li>Object代表拥有toString、hasOwnProperty方法的类型</li><li>{}和Object一样，表示原始类型和非原始类型的集合</li></ul><p>object和Object的区别：</p><ol><li>object不支持原始类型</li><li>Object支持string、number、noolean等原始类型，非严格模式下，支持undefined和null</li></ol><h3 id="_16、类" tabindex="-1">16、类 <a class="header-anchor" href="#_16、类" aria-hidden="true">#</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">class Person {</span></span>
<span class="line"><span style="color:#babed8;">  name: string;</span></span>
<span class="line"><span style="color:#babed8;">  age: number;</span></span>
<span class="line"><span style="color:#babed8;">  constructor(name: string, age: number) {</span></span>
<span class="line"><span style="color:#babed8;">    this.name = name;</span></span>
<span class="line"><span style="color:#babed8;">    this.age = age;</span></span>
<span class="line"><span style="color:#babed8;">  }</span></span>
<span class="line"><span style="color:#babed8;">  sayHi(): void {</span></span>
<span class="line"><span style="color:#babed8;">    console.log(`Hi, ${this.name}`);</span></span>
<span class="line"><span style="color:#babed8;">  }</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h3 id="_17、数组-这个需要删除处理" tabindex="-1">17、数组（这个需要删除处理） <a class="header-anchor" href="#_17、数组-这个需要删除处理" aria-hidden="true">#</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">const flag1: number[] = [1, 2, 3];</span></span>
<span class="line"><span style="color:#babed8;">const flag2: Array&lt;number&gt; = [1, 2, 3];</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h3 id="_18、函数" tabindex="-1">18、函数 <a class="header-anchor" href="#_18、函数" aria-hidden="true">#</a></h3><h4 id="_18-1-函数声明" tabindex="-1">18.1 函数声明 <a class="header-anchor" href="#_18-1-函数声明" aria-hidden="true">#</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">function sum(num1: number, num2: number): number {</span></span>
<span class="line"><span style="color:#babed8;">  return num1 + num2;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_18-2-函数表达式" tabindex="-1">18.2 函数表达式 <a class="header-anchor" href="#_18-2-函数表达式" aria-hidden="true">#</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">const sum = function (num1: number, num2: number): number {</span></span>
<span class="line"><span style="color:#babed8;">  return num1 + num2;</span></span>
<span class="line"><span style="color:#babed8;">};</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">const sum = (num1: number, num2: number): number =&gt; num1 + num2;</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_18-3-接口定义参数" tabindex="-1">18.3 接口定义参数 <a class="header-anchor" href="#_18-3-接口定义参数" aria-hidden="true">#</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">interface sum {</span></span>
<span class="line"><span style="color:#babed8;">  (num1: number, num2: number): number;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_18-4-可选参数" tabindex="-1">18.4 可选参数 <a class="header-anchor" href="#_18-4-可选参数" aria-hidden="true">#</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">function sum(x: number, y?: number): number {</span></span>
<span class="line"><span style="color:#babed8;">  if (y) {</span></span>
<span class="line"><span style="color:#babed8;">    return x + y;</span></span>
<span class="line"><span style="color:#babed8;">  }</span></span>
<span class="line"><span style="color:#babed8;">  return x;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;">sum(1, 2);</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_18-5-默认参数" tabindex="-1">18.5 默认参数 <a class="header-anchor" href="#_18-5-默认参数" aria-hidden="true">#</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">function sum1(x: number, y: number = 2): number {</span></span>
<span class="line"><span style="color:#babed8;">  return x + y;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;">sum1(1)</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_18-6-剩余参数" tabindex="-1">18.6 剩余参数 <a class="header-anchor" href="#_18-6-剩余参数" aria-hidden="true">#</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">function add(...numbers: number[]): number {</span></span>
<span class="line"><span style="color:#babed8;">  let sum = 0;</span></span>
<span class="line"><span style="color:#babed8;">  for (let i = 0; i &lt; numbers.length; i++) {</span></span>
<span class="line"><span style="color:#babed8;">    sum += numbers[i];</span></span>
<span class="line"><span style="color:#babed8;">  }</span></span>
<span class="line"><span style="color:#babed8;">  return sum;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_18-7-函数重载" tabindex="-1">18.7 函数重载 <a class="header-anchor" href="#_18-7-函数重载" aria-hidden="true">#</a></h4><p>说明：跟js本身的处理方式还是一样的，依旧使用typeof判断参数的类型进行处理</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">function add(x: number, y: number): number;</span></span>
<span class="line"><span style="color:#babed8;">function add(x: string, y: string): string;</span></span>
<span class="line"><span style="color:#babed8;">function add(x: any, y: any): any {</span></span>
<span class="line"><span style="color:#babed8;">  return x + y;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>函数重载真正执行的是同名函数最后定义的函数体 在最后一个函数体定义之前全都属于函数类型定义 不能写具体的函数实现方法 只能定义类型</p><h3 id="_19、类型推论" tabindex="-1">19、类型推论 <a class="header-anchor" href="#_19、类型推论" aria-hidden="true">#</a></h3><p>当没有设置类型约束时，默认会以初始值的类型作为该变量的类型，当没有值时则为any， undefined 和 null等于没有值</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">// 类型推论</span></span>
<span class="line"><span style="color:#babed8;">// let x = 1;</span></span>
<span class="line"><span style="color:#babed8;">// x = true; // error TS2322: Type &#39;boolean&#39; is not assignable to type &#39;number&#39;.</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">// 初始值没有赋值，则为any</span></span>
<span class="line"><span style="color:#babed8;">let x;</span></span>
<span class="line"><span style="color:#babed8;">x = 1;</span></span>
<span class="line"><span style="color:#babed8;">x = true;</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h3 id="_20、类型断言" tabindex="-1">20、类型断言 <a class="header-anchor" href="#_20、类型断言" aria-hidden="true">#</a></h3><p>类型断言可以用来手动指定一个值的类型 语法 ：值 as 类型 或者&lt;类型&gt;值 在tsx中必须使用 前者</p><blockquote><p>类型断言的用途：</p></blockquote><p>将一个一个联合类型断言为其中一个类型</p><p>将父类断言成子类</p><p>可以将任意类型断言成any类型</p><blockquote><p>总结</p></blockquote><ul><li>联合类型可以被断言成其中一个类型</li><li>父类可以断言成子类</li><li>任何类型可以断言成any</li><li>any可以断言成任何类型</li></ul><p>类型断言只是欺骗编译器，让编译器可以编译通过，但是如果强制类型转换，在执行的过程中回报错</p><blockquote><p>例子：</p></blockquote><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Cat</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">run</span><span style="color:#89DDFF;">():</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Fish</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">swim</span><span style="color:#89DDFF;">():</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">isFish</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">animal</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Cat</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">|</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Fish</span><span style="color:#89DDFF;">):</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">animal</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">swim</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// error TS2339: Property &#39;swim&#39; does not exist on type &#39;Cat | Fish&#39;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"></span></code></pre></div><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Cat</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">run</span><span style="color:#89DDFF;">():</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Fish</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">swim</span><span style="color:#89DDFF;">():</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">isFish</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">animal</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Cat</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">|</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Fish</span><span style="color:#89DDFF;">):</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> ((&lt;</span><span style="color:#FFCB6B;">Fish</span><span style="color:#F07178;">&gt;</span><span style="color:#BABED8;">animal</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">swim</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Cat</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">run</span><span style="color:#89DDFF;">():</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Fish</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">swim</span><span style="color:#89DDFF;">():</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">isFish</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">animal</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Cat</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">|</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Fish</span><span style="color:#89DDFF;">):</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> ((</span><span style="color:#BABED8;">animal</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Fish</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">swim</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>数的参数为接口类型的时候，有点特殊情况，函数的参数支持协变。协变不用关注对象的类型，只需要关心对象的参数。比如下面例子</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">interface a {</span></span>
<span class="line"><span style="color:#babed8;">  a: number;</span></span>
<span class="line"><span style="color:#babed8;">  c: number;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;">interface b {</span></span>
<span class="line"><span style="color:#babed8;">  a: number;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;">function fnc(params1: a): void {</span></span>
<span class="line"><span style="color:#babed8;">  console.log(params1.a);</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;">let A: a = {</span></span>
<span class="line"><span style="color:#babed8;">  a: 10,</span></span>
<span class="line"><span style="color:#babed8;">  c: 20,</span></span>
<span class="line"><span style="color:#babed8;">};</span></span>
<span class="line"><span style="color:#babed8;">let B: b = {</span></span>
<span class="line"><span style="color:#babed8;">  a: 10,</span></span>
<span class="line"><span style="color:#babed8;">};</span></span>
<span class="line"><span style="color:#babed8;">fnc(B as a);</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h3 id="_21、非空断言" tabindex="-1">21、非空断言 <a class="header-anchor" href="#_21、非空断言" aria-hidden="true">#</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">let user: string | null | undefined;</span></span>
<span class="line"><span style="color:#babed8;">// console.log(user.toUpperCase()); //  Object is possibly &#39;null&#39; or &#39;undefined&#39;.</span></span>
<span class="line"><span style="color:#babed8;">// console.log(user?.toUpperCase()); // ES新语法</span></span>
<span class="line"><span style="color:#babed8;">console.log(user!.toUpperCase()); // 编译过了，但是执行的时候会报js执行错误 TypeError: Cannot read property &#39;toUpperCase&#39; of undefined</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h3 id="_22、确定值断言" tabindex="-1">22、确定值断言 <a class="header-anchor" href="#_22、确定值断言" aria-hidden="true">#</a></h3><p>声明可以不会报错，但是在使用之前必须进行赋值</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">let x: number;</span></span>
<span class="line"><span style="color:#babed8;">console.log(x); // error TS2454: Variable &#39;x&#39; is used before being assigned.</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h3 id="_23、联合类型-多个类型取其一" tabindex="-1">23、联合类型(多个类型取其一) <a class="header-anchor" href="#_23、联合类型-多个类型取其一" aria-hidden="true">#</a></h3><p>联合类型用<code>|</code>分隔，表示取值可以为多种类型中的一种</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">let a:number| string</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h3 id="_24、类型别名" tabindex="-1">24、类型别名 <a class="header-anchor" href="#_24、类型别名" aria-hidden="true">#</a></h3><p>简化联合类型的属性</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">type ns = number | string</span></span>
<span class="line"><span style="color:#babed8;">let a:ns</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h3 id="_25、交叉类型" tabindex="-1">25、交叉类型 <a class="header-anchor" href="#_25、交叉类型" aria-hidden="true">#</a></h3><p>跟联合类型对应，多个类型都必须存在 并且的关系</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">A</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">B</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">sex</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#BABED8;"> person</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">A</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&amp;</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">B</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">xiaoming</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">sex</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">男</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span>
<span class="line"></span></code></pre></div><p>注意：交叉类型取的多个类型的并集，但是如果key相同但是类型不同，则该key为never类型</p><p>其实就是相同的key类型你必须给成一样，否则没有办法调用</p><h3 id="_26、类型守卫" tabindex="-1">26、类型守卫 <a class="header-anchor" href="#_26、类型守卫" aria-hidden="true">#</a></h3><p><strong>类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内</strong></p><p>简而言之就是js中书写代码根据类型不同执行不同操作的一种变种展示，但是ts的写法可以防止程序在书写代码的时候就将所有的情况写全</p><p>关键字：switch、typeof、 ===、instanceof、in、 还有一个类型谓词<code>is</code></p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Dog</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">wang</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Cat</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">miao</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> isDog </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">animal</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Dog</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">|</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Cat</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">wang</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">in</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">animal</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> getName </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">animal</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Dog</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">|</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Cat</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#82AAFF;">isDog</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">animal</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">animal</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Dog</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">wang</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span>
<span class="line"></span></code></pre></div><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Dog</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">wang</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Cat</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">miao</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> isDog </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">animal</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Dog</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">|</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Cat</span><span style="color:#89DDFF;">):</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">animal</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">is</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Dog</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">wang</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">in</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">animal</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> getName </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">animal</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Dog</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">|</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Cat</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#82AAFF;">isDog</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">animal</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">animal</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">wang</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#BABED8;"> mm</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Cat</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">miao</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">miaomiao</span><span style="color:#89DDFF;">&quot;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#BABED8;">(</span><span style="color:#82AAFF;">getName</span><span style="color:#BABED8;">(mm))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"></span></code></pre></div><h3 id="_27、接口" tabindex="-1">27、接口 <a class="header-anchor" href="#_27、接口" aria-hidden="true">#</a></h3><p>为我们的代码提供一种约定</p><p>?: 可选函数或者属性</p><p>readonly 属性名 只读属性 只读属性用于限制只能在对象刚刚创建的时候修改其值</p><p>ReadonlyArray 类型，它与 Array 相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改。</p><p>TypeScript 的核心原则之一是对值所具有的结构进行类型检查。 而接口的作用就是为这些类型命名和为你的代码或第三方代码定义数据模型。</p><blockquote><p>接口和类型别名</p></blockquote><p>type(类型别名)会给一个类型起个新名字。 type 有时和 interface 很像，但是可以作用于原始值（基本类型），联合类型，元组以及其它任何你需要手写的类型。起别名不会新建一个类型 - 它创建了一个新名字来引用那个类型。给基本类型起别名通常没什么用，尽管可以做为文档的一种形式使用。</p><h3 id="_28、泛型" tabindex="-1">28、泛型 <a class="header-anchor" href="#_28、泛型" aria-hidden="true">#</a></h3><h4 id="_28-1-基本使用" tabindex="-1">28.1 基本使用 <a class="header-anchor" href="#_28-1-基本使用" aria-hidden="true">#</a></h4><p>泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">function getValue&lt;T&gt;(arg:T):T  {</span></span>
<span class="line"><span style="color:#babed8;">  return arg;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>泛型的语法是尖括号 <code>&lt;&gt;</code> 里面写类型参数，一般用 <code>T</code> 来表示第一个类型变量名称，其实它可以用任何有效名称来代替</p><p>我们有两种方式来使用：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">getValue&lt;string&gt;(&#39;hello&#39;); // 定义 T 为 string 类型</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">getValue(&#39;hello&#39;) // 自动推导类型为 string</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><blockquote><p>多个参数</p></blockquote><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">function getValue&lt;T, U&gt;(arg:[T,U]):[T,U] {</span></span>
<span class="line"><span style="color:#babed8;">  return arg;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">// 使用</span></span>
<span class="line"><span style="color:#babed8;">const str = getValue([&#39;hello&#39;, 18]);</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_28-2-泛型约束" tabindex="-1">28.2 泛型约束 <a class="header-anchor" href="#_28-2-泛型约束" aria-hidden="true">#</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">interface lengthwise {</span></span>
<span class="line"><span style="color:#babed8;">  length: number;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">function demo&lt;T extends lengthwise&gt;(arg: T): T {</span></span>
<span class="line"><span style="color:#babed8;">  console.log(arg.length);</span></span>
<span class="line"><span style="color:#babed8;">  return arg;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_28-3-泛型接口" tabindex="-1">28.3 泛型接口 <a class="header-anchor" href="#_28-3-泛型接口" aria-hidden="true">#</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">interface KeyValue&lt;T,U&gt; {</span></span>
<span class="line"><span style="color:#babed8;">  key: T;</span></span>
<span class="line"><span style="color:#babed8;">  value: U;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">const person1:KeyValue&lt;string,number&gt; = {</span></span>
<span class="line"><span style="color:#babed8;">  key: &#39;树哥&#39;,</span></span>
<span class="line"><span style="color:#babed8;">  value: 18</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;">const person2:KeyValue&lt;number,string&gt; = {</span></span>
<span class="line"><span style="color:#babed8;">  key: 20,</span></span>
<span class="line"><span style="color:#babed8;">  value: &#39;张麻子&#39;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_28-4-泛型类" tabindex="-1">28.4 泛型类 <a class="header-anchor" href="#_28-4-泛型类" aria-hidden="true">#</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">class Test&lt;T&gt; {</span></span>
<span class="line"><span style="color:#babed8;">  value: T;</span></span>
<span class="line"><span style="color:#babed8;">  add: (x: T, y: T) =&gt; T;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">let myTest = new Test&lt;number&gt;();</span></span>
<span class="line"><span style="color:#babed8;">myTest.value = 0;</span></span>
<span class="line"><span style="color:#babed8;">myTest.add = function (x, y) {</span></span>
<span class="line"><span style="color:#babed8;">  return x + y;</span></span>
<span class="line"><span style="color:#babed8;">};</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>这个代码是不能够运行的</p><h4 id="_28-5-泛型类型别名" tabindex="-1">28.5 泛型类型别名 <a class="header-anchor" href="#_28-5-泛型类型别名" aria-hidden="true">#</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">type Cart&lt;T&gt; = { list: T[] } | T[];</span></span>
<span class="line"><span style="color:#babed8;">let c1: Cart&lt;string&gt; = { list: [&quot;1&quot;] };</span></span>
<span class="line"><span style="color:#babed8;">let c2: Cart&lt;number&gt; = [1];</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_28-6-泛型参数的默认类型" tabindex="-1">28.6 泛型参数的默认类型 <a class="header-anchor" href="#_28-6-泛型参数的默认类型" aria-hidden="true">#</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">function createArray&lt;T = string&gt;(length: number, value: T): Array&lt;T&gt; {</span></span>
<span class="line"><span style="color:#babed8;">  let result: T[] = [];</span></span>
<span class="line"><span style="color:#babed8;">  for (let i = 0; i &lt; length; i++) {</span></span>
<span class="line"><span style="color:#babed8;">    result[i] = value;</span></span>
<span class="line"><span style="color:#babed8;">  }</span></span>
<span class="line"><span style="color:#babed8;">  return result;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用。有点 js 里函数默认参数的意思。</p><h4 id="_28-7-泛型工具类型" tabindex="-1">28.7 泛型工具类型 <a class="header-anchor" href="#_28-7-泛型工具类型" aria-hidden="true">#</a></h4><ul><li>typeof</li></ul><p>关键词除了做类型保护，还可以从实现推出类型，</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">//先定义变量，再定义类型</span></span>
<span class="line"><span style="color:#babed8;">let p1 = {</span></span>
<span class="line"><span style="color:#babed8;">  name: &quot;树哥&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  age: 18,</span></span>
<span class="line"><span style="color:#babed8;">  gender: &quot;male&quot;,</span></span>
<span class="line"><span style="color:#babed8;">};</span></span>
<span class="line"><span style="color:#babed8;">type People = typeof p1;</span></span>
<span class="line"><span style="color:#babed8;">function getName(p: People): string {</span></span>
<span class="line"><span style="color:#babed8;">  return p.name;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;">getName(p1);</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><ul><li>keyof</li></ul><p>可以用来获取一个对象接口中的所有 key 值</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">interface Person {</span></span>
<span class="line"><span style="color:#babed8;">  name: string;</span></span>
<span class="line"><span style="color:#babed8;">  age: number;</span></span>
<span class="line"><span style="color:#babed8;">  gender: &quot;male&quot; | &quot;female&quot;;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">type PersonKey = keyof Person; //type PersonKey = &#39;name&#39;|&#39;age&#39;|&#39;gender&#39;;</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">function getValueByKey(p: Person, key: PersonKey) {</span></span>
<span class="line"><span style="color:#babed8;">  return p[key];</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;">let val = getValueByKey({ name: &quot;树哥&quot;, age: 18, gender: &quot;male&quot; }, &quot;name&quot;);</span></span>
<span class="line"><span style="color:#babed8;">console.log(val); // 树哥</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><ul><li>in</li></ul><p>用来遍历枚举类型：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">type Keys = &quot;a&quot; | &quot;b&quot; | &quot;c&quot;</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">type Obj =  {</span></span>
<span class="line"><span style="color:#babed8;">  [p in Keys]: any</span></span>
<span class="line"><span style="color:#babed8;">} // -&gt; { a: any, b: any, c: any }</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><ul><li>infer</li></ul><p>在条件类型语句中，可以用 infer 声明一个类型变量并且对它进行使用。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">type ReturnType&lt;T&gt; = T extends (</span></span>
<span class="line"><span style="color:#babed8;">  ...args: any[]</span></span>
<span class="line"><span style="color:#babed8;">) =&gt; infer R ? R : any;</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>infer R 就是声明一个变量来承载传入函数签名的返回值类型，简单说就是用它取到函数返回值的类型方便之后使用。</p><ul><li>extends</li></ul><p>有时候我们定义的泛型不想过于灵活或者说想继承某些类等，可以通过 extends 关键字添加泛型约束。</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Lengthwise</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">length</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">loggingIdentity</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">T</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">extends</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Lengthwise</span><span style="color:#89DDFF;">&gt;(</span><span style="color:#BABED8;font-style:italic;">arg</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">T</span><span style="color:#89DDFF;">):</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">T</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">arg</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">length</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">arg</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>现在这个泛型函数被定义了约束，因此它不再是适用于任意类型：</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#82AAFF;">loggingIdentity</span><span style="color:#BABED8;">(</span><span style="color:#F78C6C;">3</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span><span style="color:#BABED8;">  </span><span style="color:#676E95;font-style:italic;">// Error, number doesn&#39;t have a .length property</span></span>
<span class="line"></span></code></pre></div><p>当我们传入合法的类型的值，即包含 length 属性的值时：</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#82AAFF;">loggingIdentity</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">length</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">张麻子</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// 编译正确</span></span>
<span class="line"></span>
<span class="line"></span></code></pre></div><ul><li>索引访问操作符</li></ul><p>使用 <code>[]</code> 操作符可以进行索引访问：</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#C792EA;">interface</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">type</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">x</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Person</span><span style="color:#BABED8;">[</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">;</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// x is string</span></span>
<span class="line"></span></code></pre></div><h3 id="_29、内置工具类" tabindex="-1">29、内置工具类 <a class="header-anchor" href="#_29、内置工具类" aria-hidden="true">#</a></h3><h4 id="_29-1-required" tabindex="-1">29.1 Required <a class="header-anchor" href="#_29-1-required" aria-hidden="true">#</a></h4><p>将类型的属性变成必选</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">interface Person {</span></span>
<span class="line"><span style="color:#babed8;">    name?: string,</span></span>
<span class="line"><span style="color:#babed8;">    age?: number,</span></span>
<span class="line"><span style="color:#babed8;">    hobby?: string[]</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">const user: Required&lt;Person&gt; = {</span></span>
<span class="line"><span style="color:#babed8;">    name: &quot;树哥&quot;,</span></span>
<span class="line"><span style="color:#babed8;">    age: 18,</span></span>
<span class="line"><span style="color:#babed8;">    hobby: [&quot;code&quot;]</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_29-2-partial" tabindex="-1">29.2 Partial <a class="header-anchor" href="#_29-2-partial" aria-hidden="true">#</a></h4><p>与 Required 相反，将所有属性转换为可选属性</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">interface Person {</span></span>
<span class="line"><span style="color:#babed8;">    name: string,</span></span>
<span class="line"><span style="color:#babed8;">    age: number,</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">const shuge:Person = {</span></span>
<span class="line"><span style="color:#babed8;">  name:&#39;树哥&#39;</span></span>
<span class="line"><span style="color:#babed8;">} // error  Property &#39;age&#39; is missing in type &#39;{ name: string; }&#39; but required in type &#39;Person&#39;.</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><p>从上面知道，如果必传而我们少穿传了的话，就会报错</p><p>我们使用 Partial 将其变为可选</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">type User = Partial&lt;Person&gt;</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">const shuge: User={</span></span>
<span class="line"><span style="color:#babed8;">  name:&#39;树哥&#39;</span></span>
<span class="line"><span style="color:#babed8;">} // 编译正确</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_29-3-exclude" tabindex="-1">29.3 Exclude <a class="header-anchor" href="#_29-3-exclude" aria-hidden="true">#</a></h4><p><code>Exclude&lt;T, U&gt;</code> 的作用是将某个类型中属于另一个的类型移除掉,剩余的属性构成新的类型</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">type T0 = Exclude&lt;&quot;a&quot; | &quot;b&quot; | &quot;c&quot;, &quot;a&quot;&gt;; // &quot;b&quot; | &quot;c&quot;</span></span>
<span class="line"><span style="color:#babed8;">type T1 = Exclude&lt;&quot;a&quot; | &quot;b&quot; | &quot;c&quot;, &quot;a&quot; | &quot;b&quot;&gt;; // &quot;c&quot;</span></span>
<span class="line"><span style="color:#babed8;">type T2 = Exclude&lt;string | number | (() =&gt; void), Function&gt;; // string | number</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_29-4-extract" tabindex="-1">29.4 Extract <a class="header-anchor" href="#_29-4-extract" aria-hidden="true">#</a></h4><p>和 Exclude 相反，<code>Extract&lt;T,U&gt;</code> 从 T 中提取出 U</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">type T0 = Extract&lt;&quot;a&quot; | &quot;b&quot; | &quot;c&quot;, &quot;a&quot; | &quot;f&quot;&gt;; // &quot;a&quot;</span></span>
<span class="line"><span style="color:#babed8;">type T1 = Extract&lt;string | number | (() =&gt; void), Function&gt;; // () =&gt;void</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_29-5-readonly" tabindex="-1">29.5 Readonly <a class="header-anchor" href="#_29-5-readonly" aria-hidden="true">#</a></h4><p>把数组或对象的所有属性值转换为只读的，这就意味着这些属性不能被重新赋值。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">interface Person {</span></span>
<span class="line"><span style="color:#babed8;">  name: string;</span></span>
<span class="line"><span style="color:#babed8;">  age: number;</span></span>
<span class="line"><span style="color:#babed8;">  gender?: &quot;male&quot; | &quot;female&quot;;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">let p: Readonly&lt;Person&gt; = {</span></span>
<span class="line"><span style="color:#babed8;">  name: &quot;hello&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  age: 10,</span></span>
<span class="line"><span style="color:#babed8;">  gender: &quot;male&quot;,</span></span>
<span class="line"><span style="color:#babed8;">};</span></span>
<span class="line"><span style="color:#babed8;">p.age = 11; // error  Cannot assign to &#39;age&#39; because it is a read-only property.</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_29-6-record" tabindex="-1">29.6 Record <a class="header-anchor" href="#_29-6-record" aria-hidden="true">#</a></h4><p>Record&lt;K extends keyof any, T&gt; 的作用是将 K 中所有的属性的值转化为 T 类型。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">type Property = &#39;key1&#39;|&#39;key2&#39;</span></span>
<span class="line"><span style="color:#babed8;">type Person = Record&lt;Property, string&gt;;</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">const p: Person = {</span></span>
<span class="line"><span style="color:#babed8;">  key1: &quot;hello 啊&quot;,</span></span>
<span class="line"><span style="color:#babed8;">  key2: &quot;树哥&quot;,</span></span>
<span class="line"><span style="color:#babed8;">};</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_29-7-pick-交集" tabindex="-1">29.7 Pick（交集） <a class="header-anchor" href="#_29-7-pick-交集" aria-hidden="true">#</a></h4><p>从某个类型中挑出一些属性出来</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">type Person = {</span></span>
<span class="line"><span style="color:#babed8;">  name: string;</span></span>
<span class="line"><span style="color:#babed8;">  age:number;</span></span>
<span class="line"><span style="color:#babed8;">  gender:string</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">type P1 = Pick&lt;Person, &quot;name&quot; | &quot;age&quot;&gt;; // { name: string; age: number; }</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">const user:P1={</span></span>
<span class="line"><span style="color:#babed8;">  name:&#39;树哥&#39;,</span></span>
<span class="line"><span style="color:#babed8;">  age:18</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_29-8-omit-去除交集部分" tabindex="-1">29.8 Omit（去除交集部分） <a class="header-anchor" href="#_29-8-omit-去除交集部分" aria-hidden="true">#</a></h4><p>与Pick相反，<code>Omit&lt;T,K&gt;</code> 从T中取出除去K的其他所有属性。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">interface Person {</span></span>
<span class="line"><span style="color:#babed8;">  name: string,</span></span>
<span class="line"><span style="color:#babed8;">  age: number,</span></span>
<span class="line"><span style="color:#babed8;">  gender: string</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;">type P1 = Omit&lt;Person, &quot;age&quot; | &quot;gender&quot;&gt;</span></span>
<span class="line"><span style="color:#babed8;">const user:P1  = {</span></span>
<span class="line"><span style="color:#babed8;">  name: &#39;树哥&#39;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_29-9-nonnullable" tabindex="-1">29.9 NonNullable <a class="header-anchor" href="#_29-9-nonnullable" aria-hidden="true">#</a></h4><p>去除类型中的 <code>null</code> 和 <code>undefined</code></p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">type P1 = NonNullable&lt;string | number | undefined&gt;; // string | number</span></span>
<span class="line"><span style="color:#babed8;">type P2 = NonNullable&lt;string[] | null | undefined&gt;; // string[]</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_29-10-parameters" tabindex="-1">29.10 Parameters <a class="header-anchor" href="#_29-10-parameters" aria-hidden="true">#</a></h4><p>用于获得函数的参数类型所组成的元组类型。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">type P1 = Parameters&lt;(a: number, b: string) =&gt; void&gt;; // [number, string]</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_29-11-returntype" tabindex="-1">29.11 ReturnType <a class="header-anchor" href="#_29-11-returntype" aria-hidden="true">#</a></h4><p>用来得到一个函数的返回值类型</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">type Func = (value: string) =&gt; string;</span></span>
<span class="line"><span style="color:#babed8;">const test: ReturnType&lt;Func&gt; = &quot;1&quot;;</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h4 id="_29-12-instancetype" tabindex="-1">29.12 InstanceType <a class="header-anchor" href="#_29-12-instancetype" aria-hidden="true">#</a></h4><p>返回构造函数类型T的实例类型</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#babed8;">class C {</span></span>
<span class="line"><span style="color:#babed8;">  x = 0;</span></span>
<span class="line"><span style="color:#babed8;">  y = 0;</span></span>
<span class="line"><span style="color:#babed8;">}</span></span>
<span class="line"><span style="color:#babed8;"></span></span>
<span class="line"><span style="color:#babed8;">type D = InstanceType&lt;typeof C&gt;;  // C</span></span>
<span class="line"><span style="color:#babed8;"></span></span></code></pre></div><h3 id="_30、tsconfig-json" tabindex="-1">30、tsconfig.json <a class="header-anchor" href="#_30、tsconfig-json" aria-hidden="true">#</a></h3><h4 id="_30-1-重要字段" tabindex="-1">30.1 重要字段 <a class="header-anchor" href="#_30-1-重要字段" aria-hidden="true">#</a></h4><ul><li>files - 设置要编译的文件的名称；</li><li>include - 设置需要进行编译的文件，支持路径模式匹配；</li><li>exclude - 设置无需进行编译的文件，支持路径模式匹配；</li><li>compilerOptions - 设置与编译流程相关的选项。</li></ul><h4 id="_30-2-compileroptions-选项" tabindex="-1">30.2 compilerOptions 选项 <a class="header-anchor" href="#_30-2-compileroptions-选项" aria-hidden="true">#</a></h4><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">compilerOptions</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#676E95;font-style:italic;">/* 基本选项 */</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">target</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">es5</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;">                       </span><span style="color:#676E95;font-style:italic;">// 指定 ECMAScript 目标版本: &#39;ES3&#39; (default), &#39;ES5&#39;, &#39;ES6&#39;/&#39;ES2015&#39;, &#39;ES2016&#39;, &#39;ES2017&#39;, or &#39;ESNEXT&#39;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">module</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">commonjs</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;">                  </span><span style="color:#676E95;font-style:italic;">// 指定使用模块: &#39;commonjs&#39;, &#39;amd&#39;, &#39;system&#39;, &#39;umd&#39; or &#39;es2015&#39;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">lib</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">[],</span><span style="color:#BABED8;">                             </span><span style="color:#676E95;font-style:italic;">// 指定要包含在编译中的库文件</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">allowJs</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">                       </span><span style="color:#676E95;font-style:italic;">// 允许编译 javascript 文件</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">checkJs</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">                       </span><span style="color:#676E95;font-style:italic;">// 报告 javascript 文件中的错误</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">jsx</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">preserve</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;">                     </span><span style="color:#676E95;font-style:italic;">// 指定 jsx 代码的生成: &#39;preserve&#39;, &#39;react-native&#39;, or &#39;react&#39;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">declaration</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">                   </span><span style="color:#676E95;font-style:italic;">// 生成相应的 &#39;.d.ts&#39; 文件</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">sourceMap</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">                     </span><span style="color:#676E95;font-style:italic;">// 生成相应的 &#39;.map&#39; 文件</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">outFile</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;">                       </span><span style="color:#676E95;font-style:italic;">// 将输出文件合并为一个文件</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">outDir</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;">                        </span><span style="color:#676E95;font-style:italic;">// 指定输出目录</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">rootDir</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;">                       </span><span style="color:#676E95;font-style:italic;">// 用来控制输出目录结构 --outDir.</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">removeComments</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">                </span><span style="color:#676E95;font-style:italic;">// 删除编译后的所有的注释</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">noEmit</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">                        </span><span style="color:#676E95;font-style:italic;">// 不生成输出文件</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">importHelpers</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">                 </span><span style="color:#676E95;font-style:italic;">// 从 tslib 导入辅助工具函数</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">isolatedModules</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">               </span><span style="color:#676E95;font-style:italic;">// 将每个文件做为单独的模块 （与 &#39;ts.transpileModule&#39; 类似）.</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#676E95;font-style:italic;">/* 严格的类型检查选项 */</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">strict</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">                        </span><span style="color:#676E95;font-style:italic;">// 启用所有严格类型检查选项</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">noImplicitAny</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">                 </span><span style="color:#676E95;font-style:italic;">// 在表达式和声明上有隐含的 any类型时报错</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">strictNullChecks</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">              </span><span style="color:#676E95;font-style:italic;">// 启用严格的 null 检查</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">noImplicitThis</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">                </span><span style="color:#676E95;font-style:italic;">// 当 this 表达式值为 any 类型的时候，生成一个错误</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">alwaysStrict</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">                  </span><span style="color:#676E95;font-style:italic;">// 以严格模式检查每个模块，并在每个文件里加入 &#39;use strict&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#676E95;font-style:italic;">/* 额外的检查 */</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">noUnusedLocals</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">                </span><span style="color:#676E95;font-style:italic;">// 有未使用的变量时，抛出错误</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">noUnusedParameters</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">            </span><span style="color:#676E95;font-style:italic;">// 有未使用的参数时，抛出错误</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">noImplicitReturns</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">             </span><span style="color:#676E95;font-style:italic;">// 并不是所有函数里的代码都有返回值时，抛出错误</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">noFallthroughCasesInSwitch</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">    </span><span style="color:#676E95;font-style:italic;">// 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#676E95;font-style:italic;">/* 模块解析选项 */</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">moduleResolution</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">node</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;">            </span><span style="color:#676E95;font-style:italic;">// 选择模块解析策略： &#39;node&#39; (Node.js) or &#39;classic&#39; (TypeScript pre-1.6)</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">baseUrl</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;">                       </span><span style="color:#676E95;font-style:italic;">// 用于解析非相对模块名称的基目录</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">paths</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span><span style="color:#BABED8;">                           </span><span style="color:#676E95;font-style:italic;">// 模块名到基于 baseUrl 的路径映射的列表</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">rootDirs</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">[],</span><span style="color:#BABED8;">                        </span><span style="color:#676E95;font-style:italic;">// 根文件夹列表，其组合内容表示项目运行时的结构内容</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">typeRoots</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">[],</span><span style="color:#BABED8;">                       </span><span style="color:#676E95;font-style:italic;">// 包含类型声明的文件列表</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">types</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">[],</span><span style="color:#BABED8;">                           </span><span style="color:#676E95;font-style:italic;">// 需要包含的类型声明文件名列表</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">allowSyntheticDefaultImports</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">  </span><span style="color:#676E95;font-style:italic;">// 允许从没有设置默认导出的模块中默认导入。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#676E95;font-style:italic;">/* Source Map Options */</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">sourceRoot</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;">                    </span><span style="color:#676E95;font-style:italic;">// 指定调试器应该找到 TypeScript 文件而不是源文件的位置</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">mapRoot</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;">                       </span><span style="color:#676E95;font-style:italic;">// 指定调试器应该找到映射文件而不是生成文件的位置</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">inlineSourceMap</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">               </span><span style="color:#676E95;font-style:italic;">// 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">inlineSources</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">                 </span><span style="color:#676E95;font-style:italic;">// 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性</span></span>
<span class="line"></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#676E95;font-style:italic;">/* 其他选项 */</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">experimentalDecorators</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true,</span><span style="color:#BABED8;">        </span><span style="color:#676E95;font-style:italic;">// 启用装饰器</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">emitDecoratorMetadata</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true</span><span style="color:#BABED8;">          </span><span style="color:#676E95;font-style:italic;">// 为装饰器提供元数据的支持</span></span>
<span class="line"><span style="color:#BABED8;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div></div></div></main><!--[--><!--]--><!----><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"components_button_index.md\":\"aa43389d\",\"面试题_js_index.md\":\"d9022b75\",\"technology_待整理_index.md\":\"cd182cba\",\"introduce.md\":\"151f998f\",\"technology_blog_index.md\":\"b9d66824\",\"technology_typescript_index.md\":\"b32f8f74\",\"www_index.md\":\"ee942a14\",\"面试题_index.md\":\"69aa1706\",\"面试题_html_index.md\":\"01fab77b\",\"技术总结_unocss.md\":\"185c54f2\",\"每日任务_index.md\":\"8d6f93c4\",\"components_index.md\":\"c76bb41d\",\"面试题_vue_index.md\":\"172437ce\",\"面试题_待整理_index.md\":\"b7b5073a\",\"index.md\":\"2bfd6ad8\",\"技术总结_index.md\":\"3f8dbe79\",\"technology_vantcli_index.md\":\"e26eafd5\",\"vue3_index.md\":\"bfa452eb\",\"vitepress_index.md\":\"8e83926c\"}")</script>
    <script type="module" async src="/assets/app.db42a1fc.js"></script>
    
  </body>
</html>